<template>
  <div class="gallery ">
    <div class="gallery-content gallery-width">
      <Title title="机关动态" pinyin="JI GUAN DONG TAI" />
      <el-row :gutter="12">
        <el-col :span="16">
          <div style="height: 440px;">
            <div style="position: absolute;right: 420px;top: 20px;z-index: 999">
              <More @click.native="handleMore(1)" />
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane :label="item.moduleName" :name="index.toString()" v-for="(item, index) in jgdt" :key="item.id">
                <div style="height: 374px;padding: 0 12px;background: #F9F9F9">
                  <div style="padding-top: 8px">
                    <div class="list-news" v-for="res in item.articleList" :key="res.id" @click="handleNews(res)">
                      <div style="display: flex;align-items: center;flex: 1">
                        <div class="list-mark"></div>
                        <div class="list-title">{{ res.name }}</div>
                      </div>
                      <div style="width: 165px">
                        {{ res.createDate }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="height: 440px;background: #F9F9F9">
            <div class="title" @click="handleMore(2)" >研委会活动</div>
            <div class="notice-content">
              <div class="school-new-list" v-for="item in xsmk" :key="item.id">
                <div class="new-list-time" @click="handleNews(item)">
                  <div class="new-list-time-day">{{ getDay(item.createDate) }}</div>
                  <div class="new-list-time-month">{{ getYear(item.createDate) }}</div>
                </div>
                <div class="new-list-content" @click="handleNews(item)">
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

import Title from "@/components/Title.vue";
import More from "@/components/More.vue";

export default {
  props: ['jgdtList', 'xsmkList'],
  components: {More, Title},
  data() {
    return {
      activeName: '0',
      id: '',
      jgdt: [],
      xsmk: []
    }
  },
  watch: {
    jgdtList:{
      handler(data){
        this.jgdt = data[0].hasChildren ? data[0].children : data[0].articleList
        this.id = this.jgdt[0].id
      },
      deep: true
    },
    xsmkList:{
      handler(data){
        this.xsmk = data[0].hasChildren ? data[0].children : data[0].articleList
        this.xsmk = this.xsmk.slice(0, 5)
        // this.id = this.jgdt[0].id
      },
      deep: true
    }
  },
  methods: {
    getYear(value) {
      const a = value.split(' ')
      const b = a[0].split('-')
      return `${ b[0] }.${ b[1] }`
    },
    getDay(value) {
      const a = value.split(' ')
      const b = a[0].split('-')
      return b[2]
    },
    handleClick(v) {
      this.id = this.jgdt[v.index].id
    },
    handleNews(item){
      if (item.out) {
        window.open(item.outHref)
      } else {
        if (item.id) {
          const { href } = this.$router.resolve({
            path: `/news`,
            query: {
              id: item.id,
              type: item.bizType
            }
          });
          window.open(href, '_blank');
        }
      }
    },
    handleMore(type){
      if(type === 1){
        const {href} = this.$router.resolve({
          path: `/more`,
          query: {
            id: this.id,
            code: this.jgdtList[0].code
          }
        });
        window.open(href, '_blank');
      }else{
        const {href} = this.$router.resolve({
          path: `/more`,
          query: {
            id: this.xsmkList[0].id,
            code: this.xsmkList[0].code
          }
        });
        window.open(href, '_blank');
      }
    }
  }
}
</script>

<style lang="less" scoped>
.gallery {
  width: 100%;
  //margin-top: 12px;
  display: flex;
  justify-content: center;
}

.gallery-bg {
  //background: url('~@/assets/img/1.png') no-repeat center;
  background-image: url('~@/assets/img/3.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.gallery-content {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1300px) {
  .gallery-width {
    width: 1200px;
  }
}

@media screen and (min-width: 1800px) {
  .gallery-width {
    width: 1400px;
  }
}

@media screen and (min-width: 2000px) {
  .gallery-width {
    width: 1920px;
  }
}

/deep/ .el-carousel__indicators {
  display: none;
}

.background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/deep/ .el-tabs__nav-scroll {
  width: 670px;
}
/deep/ .el-tabs__nav-wrap {
  width: 720px;
}

/deep/ .el-tabs__nav-prev {
  line-height: 54px;
}

/deep/ .el-tabs__nav-next {
  line-height: 54px;
}

/deep/ .el-tabs__item {
  height: 54px;
  font-size: 18px;
  font-weight: 500;
  padding: 0 30px;
  line-height: 54px;
  color: #237CBE;
  //top: 2px;
}

/deep/ .el-tabs__item:hover {
  color: #102F7A;
}

/deep/ .el-tabs__item.is-active {
  background: #237CBE;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/deep/ .el-tabs__active-bar {
  height: 0;
}

/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 30px;
  line-height: 54px;
  top: 0;
}

/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 30px;
}

/deep/ .el-timeline {
  padding: 0;
  font-size: 16px;
}

/deep/ .el-timeline-item__node {
  background-color: #237CBE;
}

/deep/ .el-timeline-item:last-child {
  padding-bottom: 0;
}

/deep/ .el-timeline-item__tail {
  border-left: 1px solid #237CBE;
  top: 17px;
  //bottom: 1px;
  height: 25px;
}

/deep/ .el-timeline-item__node--normal {
  width: 8px;
  height: 8px;
  left: 1px;
  top: 5px;
}

/deep/ .el-tabs__header {
  margin: 0 0 12px;
}

/deep/ .is-bottom {
  margin: 0;
}

/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}

/deep/ .el-timeline-item__wrapper {
  padding-left: 12px;
}

.list-news {
  font-size: 15px;
  color: #444;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //border-bottom: #102F7A 1px dashed;
}

.list-mark {
  width: 5px;
  height: 5px;
  background: #237CBE;
  margin-right: 10px;
}

.list-title {
  cursor: pointer;
  overflow: hidden; /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
  white-space: nowrap; /* 防止换行 */
  width: 580px;
}

.title {
  height: 54px;
  width: 100%;
  background: url('~@/assets/img/top.png');
  background-size: cover;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 54px;
  cursor: pointer;
}

.notice-content {
  padding: 0 15px;
  height: 386px;
  //background: #F3F9FF;
}

.school-new-list {
  height: 76px;
  border-bottom: #237CBE 1px dashed;
  padding-right: 12px;
  display: flex;
  align-items: center;
}

.school-new-list:last-child {
  border-bottom: 0;
}

.new-list-time {
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
}

.new-list-time-day {
  color: #237CBE;
  font-size: 28px;
  font-weight: 600;
}

.new-list-time-month {
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

.new-list-content {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  display: -webkit-box; /*  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */
  -webkit-box-orient: vertical; /*  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式  */
  -webkit-line-clamp: 2; /*  -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */
  overflow: hidden;
  cursor: pointer;
}
</style>
